import doT from 'dot';
import template from './TimeLine.html';
import './TimeLine.css';

export default class TimeLine {
    constructor(domId, num, callback) {
        this.container = document.getElementById(domId);
        this.container.className = this.container.className + ' timeline-contianer';
        const html = doT.template(template)();
        this.container.innerHTML = html;

        this.value = 0;
        this.isDrag = false;
        this.num = num;
        this.singleVale = 1 / num;
        this.numValue = 0;
        this.callback = callback;

        this.circle = this.container.getElementsByClassName('timeline-bar-circle')[0];
        this.highlight = this.container.getElementsByClassName('timeline-bar-highlight')[0];
        this.bar = this.container.getElementsByClassName('timeline-bar')[0];
        
        this.bar.addEventListener('mousedown', (event) => {
            let x = event.clientX;
            let rect = this.bar.getBoundingClientRect();
            let left = rect.left;
            let width = rect.width;
            this.setValue((x - left) / width);

            this.isDrag = true;
        }, false);

        this.container.addEventListener('mouseup', (event) => {
            this.isDrag = false;
        }, false);

        this.container.addEventListener('mouseleave', (event) => {
            this.isDrag = false;
        }, false);

        this.container.addEventListener('mousemove', (event) => {
            if (this.isDrag) {
                if (event.preventDefault) {
                    event.preventDefault();
                } else {
                    event.returnValue = false;
                }
                let x = event.clientX;
                let rect = this.bar.getBoundingClientRect();
                let left = rect.left;
                let width = rect.width;
                this.setValue((x - left) / width);
            }
        }, false);

        this.next = document.getElementById('control-box-next');
        this.previous = document.getElementById('control-box-previous');
        this.play = document.getElementById('control-box-play');
        this.stop = document.getElementById('control-box-stop');

        this.previous.addEventListener('click', (event) => {
            let newNumValue = this.numValue > 0 ? this.numValue - 1 : this.numValue;
            let newValue = newNumValue / this.num;
            this.setValue(newValue);
        }, false);

        this.next.addEventListener('click', (event) => {
            let newNumValue = this.numValue < this.num ? this.numValue + 1 : this.numValue;
            let newValue = newNumValue / this.num;
            this.setValue(newValue);
        }, false);

        this.play.addEventListener('click', (event) => {
            this.playAnimation();
            this.play.className = 'dispeared';
            this.stop.className = '';
        }, false);

        this.stop.addEventListener('click', (event) => {
            this.stopAnimation();
            this.stop.className = 'dispeared';
            this.play.className = '';
        }, false);
    }

    setValue(value) {
        if(value < 0) {
            value = 0;
        }
        else if(value > 1) {
            value = 1;
        }
        this.value = value;
        let numValue = Math.floor((value + this.singleVale / 2) / this.singleVale);
        if(numValue !== this.numValue) this.setNumValue(numValue);
        let pencent = value * 100 + '%';
        this.circle.style.left = pencent;
        this.highlight.style.width = pencent;
    }

    setNumValue(numValue) {
        this.numValue = numValue;
        this.callback(this.numValue);
    }

    playAnimation() {
        this.interval = setInterval(() => {
            this.value += 0.01;
            if(this.value > 1) {
                this.value = 0;
            }
            this.setValue(this.value);
        }, 1000);
    }

    stopAnimation() {
        clearInterval(this.interval);
    }

    show() {
        this.container.style.bottom = '90px';
    }

    disappear() {
        this.container.style.bottom = '-90px';
    }
}